<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/formatDate.js"></script>
</head>

<body>
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">
    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/153451/38/7773/80459/5fc4a05eE5ea7f9d1/4cfb88c3aa3e2443.jpg.webp"
        alt="">

    <form action=""><button>按钮</button></form>
    <form action=""><button>按钮</button></form>
    <form action=""><button>按钮</button></form>
    <form action=""><button>按钮</button></form>
    <form action=""><button>按钮</button></form>
    <form action=""><button>按钮</button></form>
    <form action=""><button>按钮</button></form>
    <form action=""><button>按钮</button></form>
    <form action=""><button>按钮</button></form>
    <form action=""><button>按钮</button></form>
    <a href="">01</a>
    <a href="">02</a>
    <a href="">03</a>
    <a href="">04</a>
    <a href="">05</a>
    <a href="">06</a>
    <a href="">07</a>
    <a href="">08</a>
    <a href="">09</a>
    <a href="">10</a>
</body>
<script>
    // window的子对象 (BOM相关)

    // 浏览器 window -> document -> html -> body -> ...
    // document(文档)    ->   window.document

    // 注意:
    // 1. html页面载入到浏览器中变为document的一部分
    // 2. 通过文档可以访问页面中的所有元素  => 操作元素(改变元素的样式 内容 属性 绑定事件 => DOM操作)
    // console.log(document);


    // document -> 对象 -> 属性和方法
    console.dir(document);  // 以键值对形式打印对象/函数

    // document对象的属性
    // document.all     页面中所有元素的集合
    // document.images  页面中所有img元素的集合
    // document.forms   页面中所有form元素的集合
    // document.links   页面中所有a元素的集合
    // URL   返回页面对应的URL地址
    // bgColor  获取和设置文档的背景色

    // document.documentElement  快捷获取html元素
    // document.body  快捷获取body元素
    // document.head  快捷获取head元素
    // document.title  获取和设置title标签的内容


    // console.log(document.all);
    // console.log(document.images);
    // console.log(document.forms);
    // console.log(document.links);
    // console.log(document.URL);
    // document.bgColor = "pink";


    console.log(document.documentElement);
    console.log(document.body);
    console.log(document.head);
    console.log(document.title);

    // document.title = "heihei";

    document.title = formatDate("YYYY-MM-DD hh:mm:ss");
    setInterval(function () {
        document.title = formatDate("YYYY-MM-DD hh:mm:ss");
    }, 1000)



    // document对象的方法



</script>

</html>